<template>
  <div class="">
    <!-- 一行两个 -->
    <template v-if="floors.layout == 0">
      <div class="cap-cube-wrap">
        <div class="cap-cube-list">
          <div
            class="cap-cube-item h188 flex1 bor-l"
            v-for="(photosItem, index) in floors.photos"
            :key="index"
            @click="jumpPage(photosItem)"
          >		
						 <legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:187.5,h:187.5}" />
          </div>  
        </div>
      </div>
    </template>
    <!-- 一行两个 -->

    <!-- 一行三个 -->
    <template v-if="floors.layout == 1">
      <div class="cap-cube-wrap">
        <div class="cap-cube-list">
          <div
            class="cap-cube-item h160 flex1 bor-l"
            v-for="(photosItem, index) in floors.photos"
            :key="index"
            @click="jumpPage(photosItem)"
          >
						 <legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:125,h:160}" />
          </div>
        </div>
      </div>
    </template>
    <!-- 一行三个 -->

    <!-- 一行四个 -->
    <template v-if="floors.layout == 2">
      <div class="cap-cube-wrap">
        <div class="cap-cube-list">
          <div
            class="cap-cube-item h160 flex1 bor-l"
            v-for="(photosItem, index) in floors.photos"
            :key="index"
            @click="jumpPage(photosItem)"
          >
						<legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:94,h:160}" />
          </div>
        </div>
      </div>
    </template>
    <!-- 一行四个 -->
    <!-- 二左二右 -->
    <template v-if="floors.layout == 3">
      <div class="cap-cube-wrap">
        <div class="cap-cube-list flexWrap">
          <div class="cap-cube-item  flex flexWrap">
            <div
              class="cap-cube-item-child h188 w50 child"
              v-for="(photosItem, index) in floors.photos"
              :key="index"
              @click="jumpPage(photosItem)"
            >
							<legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:187.5,h:187.5}" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 二左二右 -->

    <!-- 一左两右 -->
    <template v-if="floors.layout == 4">
      <div class="cap-cube-wrap">
        <div class="cap-cube-list">
          <div class="item-l w50 child">
            <div
              @click="jumpPage(photosItem)"
              class="needsclick"
              style="height:100%;width:100%;font-size: 0;display: inline-block;"
              v-for="(photosItem, index) in floors.photos.slice(0, 1)"
              v-if="photosItem"
              :key="index"
            >
							<legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:187.5,h:375}" />
            </div>
          </div>
          <div class="item-r w50 ">
            <div
              @click="jumpPage(photosItem)"
              class="needsclick"
              style="height:50%;width:100%;font-size: 0;display: inline-block;"
              v-for="(photosItem, index) in floors.photos.slice(1, 3)"
              v-if="photosItem"
              :key="index"
            >
							<legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:187.5,h:187.5}" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 一左两右 end -->

    <!-- 一上两下 -->
    <template v-if="floors.layout == 5">
      <div class="cap-cube-wrap">
        <div class="cap-cube-list flexWrap mb10">
          <div
            class="item-t child"
            @click="jumpPage(photosItem)"
            v-for="(photosItem, index) in floors.photos.slice(0, 1)"
            v-if="photosItem"
          >
						<legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:375,h:187.5}" />
          </div>
          <div class="item-b">
            <div
              v-for="(photosItem, index) in floors.photos.slice(1, 3)"
              v-if="photosItem"
              style="height:100%;width:50%;font-size: 0;display: inline-block;"
              @click="jumpPage(photosItem)"
            >
							<legend-image v-if="photosItem" class="img" :pic="photosItem.path" :options="{w:187.5,h:187.5}" />
            </div>
          </div>
        </div>
      </div>
    </template>
    <!-- 一上两下 end -->
  </div>
</template>

<script>
import jumpMixin from "mixin/jumpMixin.js"
import legendImage from 'components/legendImage/legendImage'
export default {
  props: {
    floors: Object
  },
	components: {
		legendImage
	},
  mixins: [jumpMixin],
  data() {
    return {};
  }
};
</script>
<style scoped>
/* 魔方 */
.flex {
  display: flex;
}
.flex1 {
  flex: 1;
}

.flexWrap {
  flex-wrap: wrap;
}

.h188 {
  height: 188px;
}
.h160 {
  height: 160px;
}

.w50 {
  flex-basis: 50%;
}

.bor-l {
  /* border-left: 1px solid #f5f5f5; */
}

.cap-cube-list {
  font-size: 0;
  display: flex;
}

.cap-cube-list .cap-cube-item .img {
  display: block;
  width: 100%;
  height: 100%;
}

.cap-cube-list .item-l {
  flex: 1;
  /* width: 187.5px; */
  height: 375px;
  /* background: #e8f7fd; */
  box-sizing: border-box;
  /* border-right: 1px solid #222; */
  /* border-bottom: 1px solid #222; */
}
.cap-cube-list .item-r {
  /* width: 187.5px; */
  height: 375px;
  /* background: #e8f7fd; */
  box-sizing: border-box;
}
.cap-cube-list .item-l .img {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.cap-cube-list .item-r .img {
  display: inline-block;
  /* width: 187.5px; */
  width: 100%;
  height: 100%;
  /* border-bottom: 1px solid #222; */
  box-sizing: border-box;
}

.child:nth-child(2n-1) {
  border-right: 1px solid #f8f8f8;
}
.child:nth-child(1),
.child:nth-child(2) {
  border-bottom: 1px solid #f8f8f8;
}

.child.cap-cube-list .item-l::after {
  content: " ";
  display: block;
  position: absolute;
  width: 1px;
  height: 100%;
  right: 0;
  top: 0;
  background: #f1f1f1;
}

.cap-cube-list .item-r .img.child:first-child ::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}

.cap-cube-list .item-t {
  flex: 0 0 100%;
  width: 100%;
  height: 187.5px;
}
.child.cap-cube-list .item-t::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}

.cap-cube-list .item-r .img.child:first-child ::before {
  content: " ";
  display: block;
  position: absolute;
  width: 100%;
  height: 1px;
  right: 0;
  bottom: 0;
  background: #f1f1f1;
}
.cap-cube-list .item-t .img {
  width: 100%;
  height: 100%;
}
.cap-cube-list .item-b {
  width: 100%;
  height: 187.5px;
  font-size: 0;
}
.cap-cube-list .item-b .img {
  display: inline-block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

/* 魔方 end */
</style>
